<template>
  <div class="home">
    <MdEditor :value="mdValue" :handle-change="mdOnChange" />
    <CodeEditor :value="codeValue" :handle-change="codeOnChange" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import MdEditor from "@/components/MdEditor.vue";
import CodeEditor from "@/components/CodeEditor.vue"; // @ is an alias to /src

const mdValue = ref();
const codeValue = ref();

const mdOnChange = (v: string) => {
  mdValue.value = v;
  console.log("mdValue:" + v);
};
const codeOnChange = (v: string) => {
  codeValue.value = v;
  console.log("codeValue:" + v);
};
</script>
<style scoped>
.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right :last-child {
  display: none;
}
</style>
